<template>
  <div class="home">
    <el-main>
      <el-row>
        <el-form :model="addForm" :rules="rules" ref="addForm">
            <el-form-item label="金额" :label-width="formLabelWidth" prop='money'>
              <el-input v-model.number="addForm.money" autocomplete="off" type="number" :precision="2" :step="0.1"></el-input>
            </el-form-item>
            <el-form-item label="分类" :label-width="formLabelWidth" prop='categoryid'>
                <el-cascader-panel v-model="addForm.categoryid" :options="categories"></el-cascader-panel>
            </el-form-item>
            <el-form-item label="时间" :label-width="formLabelWidth" prop='created_at'>
                <el-date-picker v-model="addForm.created_at" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
             <el-button @click="goBack">取 消</el-button>
            <el-button type="primary" @click="saveAddForm('addForm')"
              >确 定</el-button>
          </el-form>
      </el-row>
    </el-main>
  </div>
</template>
<script>
export default {
  name: 'addAccountBook',
  data () {
    return {
      title: '增加记录',
      fullscreenLoading: false,
      formLabelWidth: '20%',
      categories: [],
      rules: {
        money: [
          {required: true, message: '请输入金额', trigger: 'blur'},
          {type: 'number', message: '必须为数字值'}
        ],
        categoryid: [
          { required: true, message: '请选择分类', trigger: 'change' }
        ]
      },
      addForm: {
        money: '',
        categoryid: '',
        created_at: new Date()
      }
    }
  },
  mounted: function () {
    this.showCategories()
  },
  methods: {
    goBack () {
      window.history.back()
    },
    openFullScreen1 () {
      this.fullscreenLoading = true
      setTimeout(() => {
        this.fullscreenLoading = false
      }, 2000)
    },
    showCategories () {
      this.loading = true
      this.$http.get('/api/category/getlist').then((response) => {
        var res = JSON.parse(response.bodyText)
        this.loading = false
        if (res.status === 1) {
          this.categories = res.list
        } else {
          this.$message.error('分类列表获取失败')
          console.log(res['msg'])
        }
      })
    },
    saveAddForm (aaa) {
      this.$refs[aaa].validate((valid) => {
        this.loading = true
        if (valid) {
          let params = {
            money: this.addForm.money,
            categoryid: this.addForm.categoryid,
            created_at: this.addForm.created_at
          }
          this.$http.post('/api/account/book/add', params).then((res) => {
            this.loading = false
            if (res.status === 1) {
              this.$message.successs('新增成功')
              this.dialogAddgsVisible = false
              this.init()
            } else {
              this.$message.error(res['msg'])
              console.log(res['msg_text'])
            }
          })
        }
      })
    }
  }
}
</script>
